<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Statistical Thresholds</title>
    <link rel="stylesheet" href="light.css" />
  </head>
  <body>
    <noscript>
      <strong>niivue requires JavaScript.</strong>
    </noscript>
    <header>
      <label for="dpiCheck" title="higher resolution for 'retina' displays">HighDPI</label>
      <input type="checkbox" id="dpiCheck" checked />
      <label for="checkNegative">&nbsp;&nbsp; NegativeColors</label>
      <input type="checkbox" id="checkNegative" checked />
      <label for="checkSmooth" title="trilinear interpolation blurs data, but can change which voxels survive a threshold">&nbsp;&nbsp; Smooth</label>
      <input type="checkbox" id="checkSmooth" unchecked />
      <label for="checkWorld">&nbsp;&nbsp; World</label>
      <input type="checkbox" id="checkWorld" unchecked />
      <label for="slideNeg"> &nbsp; -Thresh</label>
      <input
        type="range"
        min="1"
        max="50"
        value="30"
        class="slider"
        id="slideNeg"
      />
      <label for="slideMin"> &nbsp; -Max</label>
      <input
        type="range"
        min="51"
        max="150"
        value="60"
        class="slider"
        id="slideMin"
      />
      <label for="slidePos"> &nbsp; +Thresh</label>
      <input
        type="range"
        min="1"
        max="50"
        value="1"
        class="slider"
        id="slidePos"
      />
      <label for="slideMax"> &nbsp; +Max</label>
      <input
        type="range"
        min="51"
        max="150"
        value="60"
        class="slider"
        id="slideMax"
      />
      <label for="slideOutline"> &nbsp; Outline</label>
      <input
        type="range"
        min="0"
        max="4"
        value="1"
        class="slider"
        id="slideOutline"
      />
      <select id="alphaMode">
        <option selected>restrict colorbar to range</option>
        <option>colorbar from 0,transparent subthreshold</option>
        <option>colorbar from 0, translucent subthreshold</option>
      </select>
      <button id="about">About</button>
    </header>
    <main>
      <canvas id="gl1"></canvas>
    </main>
    <footer id="location">&nbsp;</footer>
    <script type="module" async>
      import * as niivue from "../dist/index.js"
      dpiCheck.onchange = function() {
        nv1.setHighResolutionCapable(this.checked)
      }
      checkNegative.onchange = function () {
        if (this.checked) nv1.setColormapNegative(nv1.volumes[1].id, "winter")
        else nv1.setColormapNegative(nv1.volumes[1].id, "")
        nv1.drawScene()
      }
      checkSmooth.onchange = function () {
        nv1.setInterpolation(!this.checked)
      }
      checkWorld.onchange = function () {
        nv1.setSliceMM(this.checked)
      }
      slidePos.oninput = function () {
        nv1.volumes[1].cal_min = 0.1 * this.value
        nv1.updateGLVolume()
      }
      slideMin.oninput = function () {
        nv1.volumes[1].cal_minNeg = -0.1 * this.value
        nv1.updateGLVolume()
      }
      slideMax.oninput = function () {
        nv1.volumes[1].cal_max = 0.1 * this.value
        nv1.updateGLVolume()
      }
      slideOutline.oninput = function () {
        nv1.overlayOutlineWidth = 0.25 * this.value
        nv1.updateGLVolume()
      }
      slideNeg.oninput = function () {
        nv1.volumes[1].cal_maxNeg = -0.1 * this.value
        nv1.updateGLVolume()
      }
      alphaMode.onchange = function () {
        nv1.volumes[1].colormapType = this.selectedIndex
        nv1.updateGLVolume()
      }
      document.getElementById("about").addEventListener("click", doAbout)
      function doAbout() {
        window.alert(
          "NiiVue allows asymmetric positive and negative statistical thresholds. It can also make subthreshold values translucent (only apply to unsmoothed images)"
        )
      }
      var volumeList1 = [
        { url: "../images/fslmean.nii.gz" },
        {
          url: "../images/fslt.nii.gz",
          colormap: "warm",
          colormapNegative: "winter",
          cal_min: 3,
          cal_max: 6,
        },
      ]
      function handleLocationChange(data) {
        document.getElementById("location").innerHTML =
          "&nbsp;&nbsp;" + data.string
      }
      var nv1 = new niivue.Niivue({
        loadingText: "there are no images",
        backColor: [1, 1, 1, 1],
        show3Dcrosshair: true,
        onLocationChange: handleLocationChange,
      })
      nv1.setRadiologicalConvention(false)
      await nv1.attachTo("gl1")
      nv1.setSliceType(nv1.sliceTypeMultiplanar)
      nv1.setSliceMM(false)
      nv1.opts.isColorbar = true
      await nv1.loadVolumes(volumeList1)
      slideOutline.oninput()
      nv1.volumes[0].colorbarVisible = false //hide colorbar for anatomical scan
      nv1.volumes[1].cal_minNeg = -6
      nv1.volumes[1].cal_maxNeg = -3.0
      nv1.opts.multiplanarShowRender = niivue.SHOW_RENDER.ALWAYS
      nv1.setInterpolation(true)
      slidePos.oninput()
      slideMax.oninput()
      slideMin.oninput()
      alphaMode.onchange()
    </script>
  </body>
</html>
